<style>
    #search-wrapper{
        margin-bottom: 20px;
    }
</style>
<div class="layui-layout statistic-wrapper" style="padding:0 20px;">
    <div id="search-wrapper">
        <div class="layui-form">
            <div class="layui-row">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" id="start_time" name="start_time"  placeholder="请输入开始时间" class="layui-input">
                    </div> 至
                    <div class="layui-input-inline">
                        <input type="text" id="end_time" name="start_time"  placeholder="请输入结束时间" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn search" data-type="reload">搜索</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="countChart" style="width: auto;height:350px;"></div>
    <div id="sumChart" style="width: auto;height:350px;"></div>
</div>
<script src="{{.static_url}}/static/js/echarts.common.min.js"></script>
<script>
    var start = "";
    var end = "";
    var xData = "";
    var counts = "";
    var commonCounts = "";
    var vipCounts = "";
    var sums = "";
    var commonSums = "";
    var vipSums = "";
    $(function () {
        getData();
    });

    function getData() {
        $.ajax({
            url:'/statistic/table?start='+start+'&end='+end,
            type:'get',
            success:function (data) {
                if (data.code == 0){
                    counts = data.data.counts;
                    commonCounts = data.data.commonCounts;
                    vipCounts = data.data.vipCounts;
                    sums = data.data.sums;
                    commonSums = data.data.commonSums;
                    vipSums = data.data.vipSums;
                    xData = data.data.dates;
                    initChart();
                }
            }
        });
    }

    layui.use(['table','laydate'], function(){
        var table = layui.table;
        var $ = layui.$;
        var now = new Date();

        var laydate = layui.laydate;
        var endDate= laydate.render({
            elem: '#end_time',//选择器结束时间
            type: 'date',
            min:"1970-1-1",//设置min默认最小值
            max:'now',
            done: function(value,date){
                startDate.config.max={
                    year:date.year,
                    month:date.month-1,//关键
                    date: date.date-7
                };
                startDate.config.min={
                    year:date.year,
                    month:date.month-2,//关键
                    date: date.date
                }
            }
        });
        //日期范围
        var startDate=laydate.render({
            elem: '#start_time',
            type: 'date',
            max:"now",//设置一个默认最大值
            done: function(value, date){
                endDate.config.min ={
                    year:date.year,
                    month:date.month-1, //关键
                    date: date.date + 7
                };
                //console.log(value,date);
                endDate.config.max ={
                    year:date.year,
                    month:date.month, //关键
                    date: date.date
                };
            }
        });

        $('#search-wrapper .search').on('click', function(){
            start = $("#start_time").val();
            end = $("#end_time").val();
            if(start == '' && end != ''){
                layer.msg("请将时间补充完整");
                return
            }
            if(start != '' && end == ''){
                layer.msg("请将时间补充完整");
                return
            }
            getData();
            // var type = $(this).data('type');
            // active[type] ? active[type].call(this) : '';

        });
    });

    function initChart() {
        // 基于准备好的dom，初始化echarts实例
        var countChart = echarts.init(document.getElementById('countChart'));

        // 指定图表的配置项和数据
        var countOption = {
            title: {
                text: ''
            },
            //提示框组件
            tooltip: {
                trigger: 'axis',
                axisPointer: {//鼠标滑过的线条样式
                    type: 'line',
                    lineStyle: {
                        color: '#1E9FFF',//颜色
                        width: 3,//宽度
                        type: 'solid'//实线
                    }
                }
            },
            //图例
            legend: {
                data:['订单笔数','vip订单笔数','普通订单笔数']
            },
            //横轴
            xAxis: {
                data: xData,
                boundaryGap: false,//若为true,则x轴的值不在刻度上.
            },
            //纵轴
            yAxis: {},
            //系列列表。每个系列通过type决定自己的图表类型
            series: [
                {
                    name: '订单笔数',
                    type: 'line',
                    data: counts
                },
                {
                    name: 'vip订单笔数',
                    type: 'line',
                    data: vipCounts
                },
                {
                    name: '普通订单笔数',
                    type: 'line',
                    data: commonCounts,
                    itemStyle:{
                        color:"#009688"
                    }
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        countChart.setOption(countOption);


        // 基于准备好的dom，初始化echarts实例
        var sumChart = echarts.init(document.getElementById('sumChart'));

        // 指定图表的配置项和数据
        var sumOption = {
            title: {
                text: ''
            },
            //提示框组件
            tooltip: {
                trigger: 'axis',
                axisPointer: {//鼠标滑过的线条样式
                    type: 'line',
                    lineStyle: {
                        color: '#1E9FFF',//颜色
                        width: 3,//宽度
                        type: 'solid'//实线
                    }
                }
            },
            //图例
            legend: {
                data:['订单金额','vip订单金额','普通订单金额']
            },
            //横轴
            xAxis: {
                data: xData,
                boundaryGap: false,//若为true,则x轴的值不在刻度上.
            },
            //纵轴
            yAxis: {},
            //系列列表。每个系列通过type决定自己的图表类型
            series: [
                {
                    name: '订单金额',
                    type: 'line',
                    data: sums
                },
                {
                    name: 'vip订单金额',
                    type: 'line',
                    data: vipSums
                },
                {
                    name: '普通订单金额',
                    type: 'line',
                    data: commonSums,
                    itemStyle:{
                        color:"#009688"
                    }
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        sumChart.setOption(sumOption);
    }


</script>